$(function() {
    //dom节点获取
    let index = 0;
    let timer = null;
    let windowsHeight = $(window).height();
    let imgBox = $(".banner-img-box")[0];
    let bannerHeight = $(".banner-img-box").height();
    let imgArr = $(".banner-img-box").find("img");
    let flag = false;


    //初始化

    imgArr.css('height', windowsHeight);
    $(".czq_banner").addClass("current");
    $(".mainContent").css("background-image", "linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(public/images/banner" + (index + 1) + ".jpg)");
    bannerAuto();
    scrollDoSomeThing();


    //事件绑定
    // $("#control").on('click', toggleMusicControlClass);
    // $("#play-pause").on('click', toggleMusicControlClass);
    $("#more").click(mousewheelMove);
    document.addEventListener("mousewheel", function(e) {
        if (flag) return false;
        if (e.wheelDelta < 0 && $(document).scrollTop() < windowsHeight) {
            mousewheelMove();
        }
        if (e.wheelDelta > 0 && $(document).scrollTop() <= windowsHeight + 100) {
            flag = true;
            let step = bannerHeight / 30;
            let distance = $(window).scrollTop();
            let timer1 = setInterval(function() {
                distance -= step;
                $(document).scrollTop(distance);
                if ($(window).scrollTop() <= 0) {
                    clearInterval(timer1);
                    $(".czq_banner").addClass("current");
                    flag = false;
                }
            }, 12);
        }
    }, false);



    //函数声明
    function bannerAuto() {
        let width = $(document.body).width();
        $(window).resize(function() {
            windowsHeight = $(window).height();
            imgArr.css('height', windowsHeight);
            width = $(document.body).width();
            imgBox.style.transition = "none";
            imgBox.style.transform = "translateX(" + (-index * width) + "px)";
        });
        timer = setInterval(function() {
            index++;
            imgBox.style.transition = "all 0.5s linear";
            imgBox.style.transform = "translateX(" + (-index * width) + "px)";
        }, 10000);
        $(imgBox).on("transitionend", function() {
            if (index >= 3) {
                index = 0;
                imgBox.style.transition = "none";
                imgBox.style.transform = "translateX(" + (-index * width) + "px)";
            }
            $(".mainContent").css("background-image", "linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(public/images/banner" + (index + 1) + ".jpg)")
        })
    }

    function scrollDoSomeThing() {
        let startHeaderOpacity = 0.3;
        let endHeaderOpacity = 1.0;
        $(document).on('scroll', function() {
            //第一件 改变header的透明度
            let scrollHeight = $(document).scrollTop();
            let changeHeaderOpacity = (scrollHeight / bannerHeight) * (endHeaderOpacity - startHeaderOpacity) + startHeaderOpacity;
            $(".czq_header").css("background-color", "rgba(0,0,0," + changeHeaderOpacity + ")");
        });
    }

    function mousewheelMove() {
        flag = true;
        let step = bannerHeight / 30;
        let distance = $(window).scrollTop();
        let timer1 = setInterval(function() {
            distance += step;
            $(document).scrollTop(distance);
            if (distance >= windowsHeight - 30) {
                clearInterval(timer1);
                $(".czq_banner").removeClass("current");
                flag = false;
            }
        }, 12);
    }
    // function toggleMusicControlClass() {
    //     var audio = document.getElementById('music');
    //     var controlLogo = $(".control-music");
    //     if (audio !== null) {
    //         if (audio.paused) {
    //             audio.play(); // 播放
    //             $(".control-music").removeClass("glyphicon-play").addClass("glyphicon-pause");
    //             $("#play-pause").removeClass("glyphicon-play").addClass("glyphicon-pause");
    //         } else {
    //             audio.pause(); // 暂停
    //             $(".control-music").removeClass("glyphicon-pause").addClass("glyphicon-play");
    //             $("#play-pause").removeClass("glyphicon-pause").addClass("glyphicon-play");
    //         }
    //     }
    // }
});